<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>
    <style>

        .img{
            width: 100%;
            height: 800px;
            background-color: tomato;
            /*背景图片如果小于元素大小，默认沿水平和垂直方向重复*/
            background-image: url("../resource/pika.jpg");
            /*设置图片不重复*/
            background-repeat: no-repeat;

            /*设置背景图片沿x轴重复*/
            /*background-repeat: repeat-x;*/

            /*设置背景图片沿y轴重复*/
            /*background-repeat: repeat-y;*/

            /*设置背景图片大小*/
            /*background-size: 100% 100%;*/
            /*background-size: 100px 100px;*/
            /*background-size: auto;*/

            /*背景图像会完全覆盖整个容器，同时保持图片的宽高比，图片可能会被裁剪*/
            /*background-size: cover;*/

            /*背景图像会完全覆盖整个容器，同时缩放图片的宽高比，图片可能不会被裁剪*/
            /*background-size: contain;*/

            /*设置背景图的位置 相对于容器的位置*/
            background-position: center;
            /*background-position: left;*/
            /*background-position: right;*/

            /*background-position: 100px 100px;*/
            /*background-position: -100px -100px;*/

            /*设置图片背景是否随内容变动而滚动   默认值是 scroll 也就是滚动 fixed 不滚动*/
            background-attachment: fixed;

        }


    </style>


</head>
<body>


<div class="img"></div>

</body>
</html>